<script lang="ts" setup>

import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <n-space :wrap-item="false" style="padding: 15px">
    <div>
      <n-tabs :value='router.currentRoute!.value!.name as string' class="toolbox-nav" placement="left" type='line'>
        <n-tab name="toolbox-index" @click="router.push({name: 'toolbox-index'})">工具箱</n-tab>
        <n-tab name="toolbox-resources" @click="router.push({name: 'toolbox-resources'})">资源管理器</n-tab>
        <n-tab name="toolbox-downloader" @click="router.push({name: 'toolbox-downloader'})">文件下载器</n-tab>
      </n-tabs>
    </div>
    <div class="flex-max">
      <router-view/>
    </div>
  </n-space>
</template>

<style scoped>
.toolbox-nav {
  margin-left: 30px;
}

</style>
